<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-23 14:36
 * Desc: 发朋友圈海报 friend-poster
 */
-->
<template>
  <yy-page class="friend-poster">
    <view class="friend-poster__content">
      <view class="friend-poster__header">
        <view class="mb35">
          <text class="fs30 mr10">二维码</text>
          <text class="fs26 fc8">请选择要下载的二维码尺寸</text>
        </view>
        <view class="friend-poster__qr-sizes">
          <view class="friend-poster__qr-size" v-for="item in qrSize" :key="item.size" @click="getQrCode('qr', item.type)">
            <text class="fs30 mb20">{{ item.size }}</text>
            <text class="fs24 fc8">{{ item.des }}</text>
          </view>
        </view>
      </view>
      <view class="friend-poster__middle">
        <view class="friend-poster__big-img">
          <image mode="aspectFill" v-if="activeSrc" style="width: 100%; height: 100%" :src="activeSrc" />
        </view>
        <scroll-view scroll-x class="friend-poster__imgs">
          <view
            class="friend-poster__img mr"
            v-for="(item, index) in info.shareImage"
            :key="index"
            @click="onClick(item, index)"
            :class="{ 'friend-poster__img--active': active === index }"
          >
            <image :src="item" style="width: 100%; height: 100%" mode="aspectFill"></image>
          </view>
        </scroll-view>
      </view>
      <view class="friend-poster__footer">
        <view class="friend-poster__btn-friend" @click="getQrCode('poster')">生成海报</view>
      </view>
    </view>
  </yy-page>
</template>
<script>
  import { locShare } from '@/utils/locStore/data'
  // #ifdef H5
  import { getShareUrl } from '@/components/ShareBox/tools.js'
  // #endif
  import { locPosterInfo } from '@/utils/locStore/data'
  export default {
    name: 'friend-poster',
    data() {
      return {
        qrSize: [
          { size: '480*480', des: '适用于朋友圈或小单页印刷', type: '1' },
          { size: '1280*1280', des: '适用于海报展架等印刷物料', type: '2' }
        ],
        info: {},
        qrUrl: '',
        qrUrlWidth: '91',
        active: 0,
        obj: {
          type: '',
          id: ''
        }
      }
    },
    computed: {
      activeSrc() {
        return this.info.shareImage && this.info.shareImage.length > 0 ? this.info.shareImage[+this.active] : ''
      }
    },
    onLoad(options) {
      console.log(options, 'options')
      this.obj = options
    },
    onReady() {
      this.init()
    },

    methods: {
      init() {
        this.getShareMaterial()
      },
      // 获取小程序码 并 跳转
      getQrCode(to, type = '') {
        if (type) {
          this.qrUrlWidth = type === '1' ? '480' : '1280'
        } else {
          this.qrUrlWidth = '91'
        }

        const obj = Object.assign({}, locShare.get(), this.obj)
        const { shareQuery, jumpUrl } = this.$auth.getShareInfo(obj)
        console.log(shareQuery, 'shareQuery', jumpUrl, 'jumpUrl')

        // #ifdef H5
        const h5Url = getShareUrl({
          link: `${jumpUrl}?sq=${shareQuery}`
        }).allUrl
        this.qrUrl = h5Url
        console.log(this.qrUrl, '======123')
        const query = { qrUrl: this.qrUrl }
        locPosterInfo.set(query)
        this.jumpTo(to, type)
        // #endif

        // #ifdef MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO
        let envVersion = uni.getAccountInfoSync().miniProgram.envVersion
        // #ifdef  MP-ALIPAY
        envVersion = 'develop'
        //#endif
        console.log(shareQuery, 'shareQuery')
        // return
        uni.$api.public
          .getQrCode({
            scene: `${shareQuery}`,
            width: this.qrUrlWidth,
            page: jumpUrl,
            check_path: 0,
            env_version: envVersion === 'release' ? 'release' : envVersion === 'develop' ? 'develop' : 'trial'
          })
          .then((res) => {
            this.qrUrl = res.url
            console.log(this.qrUrl, 'this.qrUrlthis.qrUrlthis.qrUrlthis.qrUrl')
            this.jumpTo(to, type)
          })
        // #endif
      },
      // 跳转去 下载二维码 或 生成海报
      jumpTo(to, type = '') {
        if (to === 'qr') {
          this.$tools.navigateTo(`/subPages/qrCode/index?type=${type}&qrUrl=${this.qrUrl}`)
        } else if (to === 'poster') {
          const query = {
            type: this.obj.type,
            src: this.activeSrc,
            qrUrl: this.qrUrl,
            describe: this.info.describe,
            name: this.info.name,
            price: this.info.price,
            id: this.obj.id
          }
          locPosterInfo.set(query)
          this.$tools.navigateTo(`/subPages/poster/index`)
          // this.$to(`/subPages/poster/index?query=${query}`)
        } else {
          return
        }
      },

      getShareMaterial() {
        uni.$api.distribution
          .getShareMaterial({
            type: ['coupon', 'normal'].includes(this.obj.type) ? '2' : '',
            id: this.obj.id
          })
          .then((res) => {
            this.info = res
            console.log(res, 'resres')
          })
          .catch((err) => {
            console.log(err)
          })
      },
      onClick(item, index) {
        this.active = index
      }
    }
  }
</script>
<style lang="scss" scoped>
  .friend-poster {
    &__content {
      border-top: 1px solid #e9e9e9;
      margin-bottom: 55upx;
    }
    &__header {
      margin-bottom: 20upx;
      padding: 42upx 30upx 51upx 30upx;
      background: #ffffff;
      letter-spacing: 2upx;
    }
    &__qr-sizes {
      letter-spacing: 0upx;
      display: flex;
      justify-content: space-between;
    }
    &__qr-size {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 332upx;
      height: 150upx;
      border: 1upx solid #e9e9e9;
      border-radius: 10upx;
    }

    &__middle {
      background: #ffffff;
      padding: 35upx 0 39upx;
      margin-bottom: 31upx;
    }
    &__big-img {
      overflow: hidden;
      margin: 0 auto;
      margin-bottom: 25upx;
      width: 685upx;
      height: 685upx;
      border-radius: 20upx;
    }
    &__imgs {
      width: calc(100% - 30upx);
      padding-left: 30upx;
      white-space: nowrap;
    }
    &__img {
      box-sizing: border-box;
      overflow: hidden;
      margin-right: 21upx;
      display: inline-block;
      width: 150upx;
      height: 150upx;
      border-radius: 20upx;
    }
    &__img--active {
      position: relative;
      border: 6upx solid #52bdfd;
    }
    &__img--active::after {
      content: '';
      position: absolute;
      bottom: -5upx;
      right: -5upx;
      width: 50upx;
      height: 50upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/activeImg.png) no-repeat;
      background-size: 100%;
    }

    &__footer {
      display: flex;
      padding: 0 20upx 0 30upx;
    }
    &__btn-share {
      margin-right: 20upx;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100upx;
      height: 100upx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 18upx;
      color: #ffffff;
      font-size: 22upx;
    }
    &__share-img {
      margin: 19upx 0 7upx;
      width: 42upx;
      height: 36upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/share-btn.png) no-repeat;
      background-size: 100%;
    }
    &__btn-friend {
      // width: 600upx;
      width: 100%;
      height: 100upx;
      text-align: center;
      line-height: 100upx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 100upx;
      font-size: 36upx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
</style>
